<template>
<div class="box1">
    <!-- 号码 -->
    <el-form-item label="号码" label-width="120px" style="width:94%">
        <div v-for="(item,index) in info" :key="index" class="sysItem">
            <el-select v-if="item.hasOwnProperty('notFrist')" v-model="item.boolType" style="width:80px;margin-right:10px">
                <el-option label="AND" value=1></el-option>
                <el-option label="OR" value=2></el-option>
                <el-option label="NOT" value=3></el-option>
            </el-select>
            <el-select v-if="!item.hasOwnProperty('notFrist')" v-model="item.key" placeholder="--请选择--" style="width:300px;margin-bottom:6px">
                <el-option label="申请号" value="application_number"></el-option>
                <el-option label="公开(公告)号" value="public_number"></el-option>
                <el-option label="IPC主分类号" value="ipc_main"></el-option>
                <el-option label="专利类型" value="patent_type"></el-option>
                <el-option label="标题" value="title"></el-option>
            </el-select>

            <el-select v-if="item.hasOwnProperty('notFrist')" v-model="item.key" placeholder="--请选择--" style="width:210px;margin-bottom:6px">
                <el-option label="申请号" value="application_number"></el-option>
                <el-option label="公开(公告)号" value="public_number"></el-option>
                <el-option label="IPC主分类号" value="ipc_main"></el-option>
                <el-option label="专利类型" value="patent_type"></el-option>
                <el-option label="标题" value="title"></el-option>
            </el-select>

            <el-input v-if="item.key == 'application_number'" placeholder="可输入完整或部分申请号,例如:CN201730123989.X,CN201730123989
" class="inputView" v-model="item.value"></el-input>

            <el-input v-if="item.key == 'public_number'" placeholder="可输入完整或部分公开(公告)号,例如:CN304956775S8,CN304956775
" class="inputView" v-model="item.value"></el-input>

            <el-input v-if="item.key == 'ipc_main'" placeholder="可输入完成主分类号,例如:B29C43/02
" class="inputView" v-model="item.value"></el-input>

            <el-input v-if="item.key == 'patent_type'" placeholder="可输入发明公开、发明授权、实用新型或外观设计四种类型
" class="inputView" v-model="item.value"></el-input>

            <el-input v-if="item.key == 'title'" placeholder="可输入部分关键信息,例如:电子计算机
" class="inputView" v-model="item.value"></el-input>

            <i @click="addNum" style="position:absolute;right:-30px;fontSize:20px;marginTop:5px;color:#008ac0;font-weight:700" v-if="!item.hasOwnProperty('notFrist')" class="el-icon-circle-plus-outline"></i>
            <i @click="deltNum(index)" style="position:absolute;right:-30px;fontSize:20px;marginTop:5px;color:#008ac0;font-weight:700" v-if="item.hasOwnProperty('notFrist')" class="el-icon-remove-outline"></i>
        </div>

    </el-form-item>
</div>
</template>

<script>
export default {
    name: "number",
    props: {

    },
    watch: {
        info: {
            handler(newV, OldV) {

                this.$emit("done", this.translateForm(newV))

            },
            deep: true
        }

    },
    data() {
        return {
            result: [],
            info: [{
                    value: '',
                    key: "application_number",

                },
                {
                    value: "",
                    notFrist: true,
                    boolType: "1",
                    key: "public_number"
                },
                {
                    value: "",
                    notFrist: true,
                    boolType: "1",
                    key: "ipc_main"
                }, {
                    value: "",
                    notFrist: true,
                    boolType: "1",
                    key: "patent_type"
                }

            ]
        }
    },
    methods: {
        translateForm(newV) {
            let keys = ["application_number", "public_number", "ipc_main", "patent_type"]

            let tempArr = []
            let list = JSON.parse(JSON.stringify(newV))
            list.forEach(item => {
                if (item.hasOwnProperty("key") && item.value.trim()) {
                    let obj = {
                        fieldName: item.key,
                        value: item.value,
                        boolType: item.hasOwnProperty("boolType") ? item.boolType : 1
                    }
                    tempArr.push(obj)

                }
            })

            return tempArr

        },

        addNum() {
            if (this.info.length < 4) {
                let obj = {
                    value: "",
                    notFrist: true,
                    boolType: "1"
                }
                this.info.push(obj)
            }
        },
        deltNum(index) {
            //  console.log(index)
            this.info.splice(index, 1);

        },
    }
}
</script>

<style lang="scss" scoped>
.box1 {
    background-color: #ffffff;
    width: 100%;

    // height:40px;
    ::v-deep .el-form-item__label {
        text-align: left;
        font-size: 12px;
        // color: red;
    }

    .sysItem {
        width: 100%;
        display: flex;
        flex-direction: row;

        .inputView {
            flex: 1;
            margin-left: 10px;
        }
    }
}
</style>
